<!DOCTYPE html> <html>
<head>
<title>Items</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
  <div class="container">
<blockquote>信息提示效果</blockquote>
<button class='btn' onclick="ciy_toast('信息提示')">toast</button>
<button class='btn' onclick="ciy_toast('',{icon:1})">toast1</button>
<button class='btn' onclick="ciy_toast('加载中...',{icon:2})">toast2</button>
<button class='btn' onclick="ciy_toast('信息提示信息提示信息提示',{icon:3})">toast3</button>
<button class='btn' onclick="ciy_toast('',{icon:4})">toast4</button>
<button class='btn' onclick="ciy_toast('信息提示',{icon:5})">toast5</button>
<button class='btn' onclick="ciy_toastclose()">关闭提示</button>
<br/><br/>

<blockquote>顶部静默加载效果</blockquote>
<button class='btn' onclick="ciy_loading()">静默加载</button>
<button class='btn' onclick="ciy_loadclose('succ')">加载成功</button>
<button class='btn' onclick="ciy_loadclose('fail')">加载失败</button> 请先点击静默加载，再点击成功或失败，注意看顶部窄条
<br/><br/>

<blockquote>对话框</blockquote>
<button class='btn' onclick="ciy_alert('操作完成')">弹出对话框</button>
<button class='btn' onclick="ciy_alert('尺寸自适应，尺寸自适应，尺寸自适应，尺寸自适应，尺寸自适应，尺寸自适应<br/>尺寸自适应<br/>尺寸自适应<br/>尺寸自适应<br/>')">尺寸自适应对话框</button>
<button class='btn' onclick="ciy_alert('能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本<br/>能自动换行的超长文本')">超长文本对话框</button>
<br/><br/>

<blockquote>自定尺寸对话框</blockquote>
<button class='btn' onclick="alert0()">自定尺寸对话框</button>
<button class='btn' onclick="alert0b()">写法二</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert0()
{
    ciy_alert('自定尺寸对话框',null,{contentstyle:'width:30em;height:20em;'}
    );
}
function alert0b()
{
    ciy_alert({
        contentstyle:'width:30em;height:20em;',
        content:'自定尺寸对话框'
    });
}
</script>

<blockquote>多按钮对话框</blockquote>
<button class='btn' onclick="alert1()">多按钮对话框</button>
<button class='btn' onclick="alert1b()">写法二</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert1()
{
    ciy_alert('确定删除？',function(btn){
            ciy_alert('点击：'+btn);
        },{btns:['确定','<a class="btn btn-default">取消</a>','关闭']}
    );
}
function alert1b()
{
    ciy_alert({
        btns:['确定','<a class="btn btn-default">取消</a>','关闭'],
        content:'确定删除？',
        cb:function(btn){
            ciy_alert('点击：'+btn);
        }
    });
}
</script>

<blockquote>带输入对话框</blockquote>
<button class='btn' onclick="alert3()">自定义输入框</button>
<button class='btn' onclick="alert3b()">写法二</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert3()
{
    ciy_alert('<div class="form-group"><label>文本框</label><div><input type="text" name="title"/></div></div><div class="form-group"><label>下拉列表框</label><div><select name="sel"><option value="afds">aaaa</option></select></div></div><div class="form-group"><label>多行文本框</label><div><textarea name="text"></textarea></div></div>',
    function(btn,inputs){
        ciy_alert('已输入input:'+inputs.title+"<br/>select:"+inputs.sel+"<br/>textarea:"+inputs.text);
    });
}
function alert3b()
{
    ciy_alert({
        content:'<div class="form-group"><label>文本框</label><div><input type="text" name="title"/></div></div><div class="form-group"><label>下拉列表框</label><div><select name="sel"><option value="afds">aaaa</option></select></div></div><div class="form-group"><label>多行文本框</label><div><textarea name="text"></textarea></div></div>',
        cb:function(btn,inputs){
            ciy_alert('已输入input:'+inputs.title+"<br/>select:"+inputs.sel+"<br/>textarea:"+inputs.text);
        }
    });
}
</script>

<blockquote>iframe对话框</blockquote>
<button class='btn' onclick="alert4()">嵌入网页对话框</button>
<button class='btn' onclick="alert4b()">写法二</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert4()
{
    ciy_alert('',null,{contentstyle:'width:50em;height:40em;',frame:'demo.php'});
}
function alert4b()
{
    ciy_alert({contentstyle:'width:50em;height:40em;',frame:'demo.php'});
}
</script>

<blockquote>iframe对话框回调</blockquote>
<button class='btn' onclick="alert5()">演示回调</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert5()
{
    ciy_alert({
        title:'演示回调',
        contentstyle:'width:300px;height:30em;',
        frame:'plug_dialog_cb.html',
        nobutton:true,
        cb:function(btn,data){
            console.log(btn,data);
            ciy_alert('回调成功id='+data.id+'，请查看console');
        }
    });
}
</script>
<blockquote>自定义对话框</blockquote>
<button class='btn' onclick="alert10()">自定义标题</button>
<button class='btn' onclick="alert11()">无标题栏对话框</button>
<button class='btn' onclick="alert12()">无按钮对话框</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert10()
{
    ciy_alert('看上面↑',null,{title:'自定义标题'});
}
function alert11()
{
    ciy_alert('没有标题栏',null,{notitle:true});
}
function alert12()
{
    ciy_alert('没有按钮',null,{nobutton:true});
}
</script>

<blockquote>左右对齐对话框</blockquote>
<button class='btn' onclick="alert20()">左对齐弹出</button>
<button class='btn' onclick="alert21()">右对齐弹出</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert20()
{
    ciy_alert('左对齐',null,{align:'left'});
}
function alert21()
{
    ciy_alert('右对齐',null,{align:'right'});
}
</script>

<blockquote>其他对话框</blockquote>
<button class='btn' onclick="alert50()">最大化对话框</button>
<button class='btn' onclick="alert51()">点空白不关闭</button>
<br/><br/>
<script type="text/javascript">
'use strict';
function alert50()
{
    ciy_alert('最大化对话框',null,{max:true});
}
function alert51()
{
    ciy_alert('点空白不关闭',null,{nomaskclose:true});
}
</script>
<br/><br/>
  </div>
<script src="/jscss/jquery-1.12.4.min.js"></script>
<script src="/jscss/ciy.js"></script>
</body></html>